<!--
 * @Author: 李兵 964368540@qq.com
 * @Date: 2024-05-25 10:13:50
 * @LastEditors: xuezhuangzhuang xzz6996@qq.com
 * @LastEditTime: 2024-07-20 10:01:13
 * @FilePath: \crm\pages\form\photo-order-form.vue
 * @Description: 拍照下单  from
-->
<template>
	<view class="photoBox">
		<u--form labelPosition="top" :model="formData" :rules="rules" ref="formData">
			<u-form-item label="订单照片:" prop="fileList" borderBottom ref="item1">
				<uni-file-picker v-model="fileList" fileMediatype="image" file-extname="png,jpg" mode="grid"
					@select="onSuccess" @delete="onDelete" />
			</u-form-item>
			<u-form-item label="配送开始时间:" @click="timeStart" prop="reservationDeliverTimeStart" borderBottom ref="item1">
				<u--input v-model="formData.reservationDeliverTimeStart" style="pointer-events: none" disabled
					disabledColor="#ffffff"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="配送结束时间:" @click="timeEnd" prop="reservationDeliverTimeEnd" borderBottom ref="item1">
				<u--input v-model="formData.reservationDeliverTimeEnd" style="pointer-events: none" disabled
					disabledColor="#ffffff"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="搬运方式:" @click="transportOpen" prop="transportTypeName" borderBottom ref="item1">
				<u--input v-model="formData.transportTypeName" style="pointer-events: none" disabled
					disabledColor="#ffffff"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="地址:" prop="address" borderBottom ref="item1">
				<u--textarea v-model="formData.address" disabled></u--textarea>
			</u-form-item>
			<u-form-item label="买家留言:" prop="problemRemark" borderBottom ref="item1">
				<u--textarea v-model="formData.problemRemark" placeholder="请输入内容"></u--textarea>
			</u-form-item>
		</u--form>
		<view class="btn">
			<u-button @click="submit" type="primary" text="提交"></u-button>
		</view>
		<u-datetime-picker @confirm="timeConfirm" :show="show" @cancel="show = false" v-model="value1"
			mode="datetime"></u-datetime-picker>
		<!-- 搬运方式 -->
		<u-picker keyName="label" @confirm="confirm" @close="transportShow = false" @cancel="transportShow = false"
			:show="transportShow" :columns="columns"></u-picker>
	</view>
</template>
<script>
	import dayjs from "dayjs";
	import {
		getToken
	} from "@/config/storage";
	import {
		mallOrderPotoSave
	} from "@/api/home";
	import {
		jcCustomContactsPage
	} from "@/api/address";
	import uniFilePicker from "@/components/uni-file-picker/components/uni-file-picker/uni-file-picker";
	import {
		upload
	} from "@/utils/oss.js";
	export default {
		name: "photo-order-form",
		onLoad() {},
		components: {
			uniFilePicker,
		},
		data() {
			return {
				transportShow: false,
				show: false,
				value1: Number(new Date()),
				loading: false,
				formData: {
					problemRemark: null,
					reservationDeliverTimeStart: "",
					reservationDeliverTimeEnd: "",
					address: "",
					transportTypeName: "",
					transportType: "",
				},
				fileList: [],
				orderUrl: {
					name: "",
					key: "",
				},
				columns: [
					[{
							label: "楼梯",
							id: 1,
						},
						{
							label: "电梯",
							id: 2,
						},
						{
							label: "其他",
							id: 3,
						},
					],
				],
				rules: {
					problemRemark: {
						type: "string",
						required: true,
						message: "买家留言",
						trigger: ["blur", "change"],
					},
					transportTypeName: {
						type: "string",
						required: true,
						message: "搬运方式",
						trigger: ["blur", "change"],
					},
				},
			};
		},
		onLoad() {
			this.jcCustomContactsPage();
		},
		methods: {
			async jcCustomContactsPage() {
				const res = await jcCustomContactsPage({
					customId: uni.getStorageSync("mUserinfo").user_id,
				});
				if (res) {
					res.records.forEach((item) => {
						if (item.customId == uni.getStorageSync("mUserinfo").user_id) {
							this.formData.address =
								item.province + item.city + item.region + item.detailAddress;
						}
					});
				}
			},
			transportOpen() {
				this.transportShow = true;
			},
			confirm(val) {
				this.formData.transportTypeName = val.value[0].label;
				this.formData.transportType = val.value[0].id;
				this.transportShow = false;
			},
			timeStart() {
				this.timeType = 1;
				this.show = true;
			},
			timeEnd() {
				this.timeType = 2;
				this.show = true;
			},
			timeConfirm(val) {
				if (this.timeType == 1) {
					this.formData.reservationDeliverTimeStart = dayjs(val.value).format(
						"YYYY-MM-DD HH:mm:ss"
					);
				} else {
					this.formData.reservationDeliverTimeEnd = dayjs(val.value).format(
						"YYYY-MM-DD HH:mm:ss"
					);
				}
				this.show = false;
			},
			tap() {
				this.$refs.customers0.show();
			},
			// 删除图片
			// deletePic() {
			// 	this.fileList = []
			// 	this.orderUrl.name = ''
			// 	this.orderUrl.key = ''
			// },
			async onSuccess(file) {
				if (file.tempFiles && file.tempFiles.length) {
					Promise.all(
						file.tempFiles.map(async (item) => {
							const x = await upload(item.url);
							return x;
						})
					).then((data) => {
						(data || []).forEach((url) => {
							this.fileList.push({
								url
							});
						});
					});
				}
			},
			onDelete(file) {
				this.fileList = this.fileList.filter((item, i) => i !== file.index);
			},
			submit() {
				this.$refs.formData
					.validate()
					.then((res) => {
						mallOrderPotoSave({
							...this.formData,
							transportType: 1,
							orderUrl: this.fileList.map((item) => item.url).join(','),
						}).then((res) => {
							uni.$u.toast("下单成功");
							// 使用事件通信发送刷新信号
							let pages = getCurrentPages() //页面栈
							let prePage = pages[pages.length - 2] //上一页
							prePage.$vm.reFresh = Math.random() //触发上一页监听器 
							uni.navigateBack({
								delta: 1,
								success: function() {

								},
							});
						});
					})
					.catch((errors) => {
						uni.$u.toast("校验失败");
					});
			},
		},
	};
</script>
<style lang="scss" scoped>
	page {
		background: #f2f4f5;
	}

	.photoBox {
		padding: 10rpx;
		background-color: #fff;
	}

	.btn {
		padding: 20rpx;
	}

	.upstairsType {
		color: #c1c5c9;
		font-size: 15px;
		line-height: 99rpx !important;
		height: 99rpx !important;
	}

	.custom-wrap {
		display: flex;
		align-items: center;
	}
</style>